import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

//1、学习flutter的简单的layout布局
//2、学习flutter的列表控件

//row的使用示例
class SimpleRow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Simple Row"),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Row(
            //排列顺序
            //textDirection: TextDirection.rtl,  从左摆到右 --- 反之
            //宽度Row  max 相当于 m_p  min 相当于w_c
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Text(
                "data",
                style: TextStyle(color: Colors.blue),
              ),
              Text(" Word")
            ],
          ),
          Row(
            //排列顺序
            //mainAxisAlignment 水平方向的（居中,左边，右边）
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              Text(
                "data",
                style: TextStyle(color: Colors.blue),
              ),
              Text(" Word")
            ],
          ),
          Row(
            //垂直方向的位置 crossAxisAlignment
            verticalDirection: VerticalDirection.down, //一般选择默认的
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Text(
                "data",
                style: TextStyle(color: Colors.blue, fontSize: 60),
              ),
              Text(" Word")
            ],
          )
        ],
      ),
    );
  }
}

//Column 的使用示例
class SimpleColumn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("SimpleColumn")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center, //主轴（Y）方向的
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text("data", style: TextStyle(color: Colors.yellow, fontSize: 50)),
          Text("dart")
        ],
      ),
    );
  }
}

//Flex 的简单使用
class SimpleFlex extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("SimpleFlex")),
      body: Flex(
        direction: Axis.horizontal,
        children: <Widget>[
          Expanded(
              flex: 1,
              child: Container(
                color: Colors.red,
                height: 50,
              )),
          Expanded(
              flex: 1,
              child: Container(
                color: Colors.grey,
                height: 50,
              )),
          Expanded(
              flex: 2,
              child: Container(
                color: Colors.yellow,
                height: 50,
              ))
        ],
      ),
    );
  }
}

//Stack 的简单使用 层叠布局
class SimpleStack extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("SimpleStack")),
      body: Stack(
        alignment: AlignmentDirectional.center, //对齐的方式
        children: <Widget>[
          Container(
            height: 150,
            width: 150,
            color: Colors.red,
          ),
          Container(
            height: 100,
            width: 100,
            color: Colors.grey,
          ),
          Container(
            height: 50,
            width: 50,
            color: Colors.yellow,
          ),
          Positioned(
              //对单个组件进行定位
              left: 100,
              top: 50,
              child: Container(
                height: 20,
                width: 20,
                color: Colors.blue,
              ))
        ],
      ),
    );
  }
}

//ListView 列表
class SimpleList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("SimpleListView")),
      body: ListView(
//        itemExtent: 50, //限制item的高度为50
        scrollDirection: Axis.vertical, //滚动的方向
        children: <Widget>[
          Container(height: 150, width: 150, color: Colors.blue),
          Container(height: 150, width: 150, color: Colors.yellow),
          Container(height: 150, width: 150, color: Colors.grey),
          Container(height: 150, width: 150, color: Colors.blue),
          Container(height: 150, width: 150, color: Colors.black),
          Container(height: 150, width: 150, color: Colors.brown),
          Container(height: 150, width: 150, color: Colors.pink)
        ],
      ),
    );
  }
}

//ListView itemBuilder 的简单使用
class SimpleItemBuilder extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("SimpleItemBuilder")),
      body: ListView.builder(
          itemCount: 50, //子控件的item 的个数
          itemBuilder: (BuildContext context, int index) {
            return index % 2 == 0
                ? Container(
                    height: 150,
                    color: Colors.yellow,
                    child: Text("index $index"),
                  )
                : Container(
                    height: 100,
                    color: Colors.red,
                    child: Text("index $index"));
          }),
    );
  }
}

//分割组件生成器 {通讯录，abc}
class SimpleSeparatorBuilder extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("SimpleSeparatorBuilder")),
      body: ListView.separated(
          itemBuilder: (BuildContext context, int index) {
            return index % 2 == 0
                ? Container(
                    height: 150,
                    color: Colors.yellow,
                    child: Text("index $index"),
                  )
                : Container(
                    height: 100,
                    color: Colors.red,
                    child: Text("index $index"));
          },
          // separatorBuilder 分割器
          separatorBuilder: (BuildContext context, int position) {
            return Divider(
                height: 2.0, thickness: 2.0, color: Colors.pinkAccent);
          },
          itemCount: 50),
    );
  }
}

//一个练习 English ListView
class SimpleEnglishListView extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _SimpleEnglishState();
  }
}

class _SimpleEnglishState extends State<SimpleEnglishListView> {
  List<String> _words = <String>[];

  void _loadWord() {
    Future.delayed(Duration(milliseconds: 1000)).then((e) {
      _words.insertAll(_words.length,
          generateWordPairs().take(20).map((e) => e.asPascalCase).toList());
      setState(() {});
    });
  }

  @override
  void initState() {
    super.initState();
    _loadWord();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("SimpleEnglishListView")),
      body: ListView.separated(
          itemBuilder: (BuildContext context, int position) {
            if (position == _words.length - 1) {
              if (_words.length - 1 < 100) {
                _loadWord();
                return Container(
                    padding: EdgeInsets.all(20),
                    child: CircularProgressIndicator(),
                    alignment: Alignment.center);
              } else {
                return Container(
                    padding: EdgeInsets.all(20),
                    child: Text("没有更多的数据了"),
                    alignment: Alignment.center);
              }
            } else {
              return ListTile(title: Text(_words[position]));
            }
          },
          separatorBuilder: (BuildContext context, int position) {
            return Divider(height: 0);
          },
          itemCount: _words.length),
    );
  }
}

//GridView 基本使用
//SliverGridDelegateWithFixedCrossAxisCount //限制个数
//SliverGridDelegateWithMaxCrossAxisExtent //限制宽度
class SimpleGridView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("SimpleGridView")),
      body: GridView(
          gridDelegate:
              //crossAxisCount 一排子view的个数 hildAspectRatio 子view的 宽高比
              //SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,childAspectRatio: 2.0),
              //maxCrossAxisExtent 子View的宽度 childAspectRatio 子view的 宽高比
              SliverGridDelegateWithMaxCrossAxisExtent(
                  maxCrossAxisExtent: 200, childAspectRatio: 0.5),
          children: <Widget>[
            Container(color: Colors.red),
            Container(color: Colors.yellow),
            Container(color: Colors.red),
            Container(color: Colors.yellow),
            Container(color: Colors.red),
            Container(color: Colors.yellow),
            Container(color: Colors.red),
            Container(color: Colors.yellow),
          ]),
    );
  }
}

//GridView  的 builder
class SimpleGridViewBuilder extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("SimpleGridViewAbridge")),
      body: GridView.builder(
          gridDelegate:
              SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
          itemBuilder: (BuildContext context, int position) {
            return position % 2 == 0
                ? Container(color: Colors.red)
                : Container(color: Colors.brown);
          }),
    );
  }
}

//GridView 的简写
class SimpleGridViewAbridge extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("SimpleGridViewAbridge")),
        //GridView.count SliverGridDelegateWithFixedCrossAxisCount 缩写这个代理
        //GridView.extent SliverGridDelegateWithMaxCrossAxisExtent 缩写这个代理
        body: GridView.extent(
          maxCrossAxisExtent: 150,
          children: <Widget>[
            Container(color: Colors.red),
            Container(color: Colors.yellow),
            Container(color: Colors.red),
            Container(color: Colors.yellow),
            Container(color: Colors.red),
            Container(color: Colors.yellow),
            Container(color: Colors.red),
            Container(color: Colors.yellow),
          ],
        ));
  }
}
